<template>
    <div class="dishes">
        <img :src = "require('../assets/menupic/' + img)">
        <div class="titlebg">
        <h3>{{title}}</h3>
        <h4>￥{{price}}</h4>
        <button @click = "customized" @touchend = "customized">●</button>
      </div>
    </div>
</template>
<script>
// import { mapState } from 'vuex'
export default {
  name: 'MenuDishsmall',
  props: {
    menuid: String,
    addid: String
  },
  computed: {
    title () {
      return this.$store.state.dishes[this.menuid].name
    },
    price () {
      return this.$store.state.dishes[this.menuid].price
    },
    img () {
      return this.$store.state.dishes[this.menuid].imgurl
    }
  },
  data () {
    return {
    }
  },
  methods: {
    customized: function () {
      console.log('打开定制页面')
      this.$store.commit('DZ')
      this.$store.commit('cm_menuid', this.menuid)
    }
  }
}
</script>
<style scoped lang="less">
.dishes{
    width: 135px;
    margin-top: 5px;
    margin-right: 5px;
    float: left;
}
.dishes img{
    width: 135px;
    height: 67px;
}
.titlebg{
    position: relative;
    width: 135px;
}
.titlebg h3{
    margin:0;
    margin-left: 5px;
    font-size: 12px;
    font-weight: bold;
    color: rgb(0, 0, 0);
}
.titlebg h4{
    margin:0;
    margin-left: 5px;
    font-size: 10px;
    color: rgb(0, 0, 0);
}
.titlebg button{
    width: 25px;
    height: 25px;
    position: absolute;
    margin-left: 100px;
    margin-top: -30px;
    border-radius: 50px;
    border: 0;
    background-color: rgba(255, 166, 0, 0.8);
    box-shadow: 0 0 5px rgb(179, 117, 2, 0.8);
    color: white;
    font-size: 10px;
    font-weight: bold;
}
@keyframes btnfade {
    0% {
        opacity: 0.75;
    }
    100% {
        opacity: 1;
    }
}
.titlebg button:hover{
    background-color: rgba(255, 255, 255, 0.8);
    color: rgba(255, 166, 0, 0.8);
    box-shadow: 0 0 5px rgb(255, 166, 0, 0.8);
    animation: btnfade 0.5s ease;
}
</style>
